<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .ig {
            border: 2px solid red;
        }

        .info {
            color: red;
        }

        .danger {
            font-size: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <img src='xx.png' class='c1'/>

    <img alt="" v-bind:src="imageUrl" v-bind:class="cls">

    <h1 v-bind:class="{info: v1, danger: v2}">你好呀</h1>
    <h1 v-bind:class="clsDict">你好呀</h1>

    <h2 v-bind:class="[a1, a2]">下雨天</h2>
    <h2 class="info danger">下雨天</h2>
    <h2 v-bind:class="[1===1?a1:'yy', a2]">下雨天</h2>

    <h3 v-bind:style="{color: clr, fontSize: size}">太阳</h3>
    <h3 style="color: red; font-size: 19px;">太阳</h3>

    <input type="button" value="点我" @click="clickMe">

</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            imageUrl: 'https://hcdn2.luffycity.com/media/frontend/public_class/PY1@2x_1566529821.1110113.png',
            cls: "ig",
            v1: true,
            v2: true,
            clsDict: {
                info: false,
                danger: false,
            },
            a1: 'info',
            a2: 'danger',
            clr: 'red',
            size: '19px',
        },
        methods: {
            clickMe: function () {
                this.v1 = false;
            }
        }
    })
</script>
</body>
</html>